<template>
  <!--他人主页-->
  <el-row>
    <el-row>
      <span style=" float: left;font-size: 20px">Ta的视频{{ num }}</span><br>
    </el-row>
    <!--没有数据所展示的-->
    <el-row style=" width: 75%;float: left;display: inline-block">
      <el-row v-if="historyList==''" style="text-align: center">
        <img src="../../../assets/img/nodata.png">
      </el-row>
    </el-row>

    <!--有数据所展示的-->
    <el-row style="width: 76%;float: left;display: inline-block" v-if="historyList!=''">
      <el-row>
        <el-row
            class="video"
            style="height: 150px;padding: 0px 0px;float: left; display: inline-block;width: 20%;text-align: center"
            v-for="his in historyList">
          <el-image style="width: 150px;height: 100px;display: inline-block;" @click="jumpPath(his.videoId)"
                    :src="his.video_cover"></el-image>
          <el-row style="display: inline-block;width: 80%;color: #4d4d4d">
             <span class="jumptitle" style="float: left" @click="jumpPath(his.video_id)">
                  {{his.video_title.substring(0,7)+"..."}}
             </span><br>
            <span style="float: left">
                <Icon type="logo-youtube" /> {{ his.video_isreprint }}
            </span>
            <span>
               <Icon type="md-time" />{{his.video_createTime.toString().substring(0,10)}}
            </span>
            <!--            <img style="width: 20px;height: 20px;float: right;" src="../../assets/img/del.png" @click="delHistory()"/>-->
          </el-row>
        </el-row>
      </el-row>
        <el-row style="display: inline-block">
          <el-pagination
              style="float: right"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout=" sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-row>
    </el-row>
    <el-col style="width: 23%;" :span="8">
      <el-card shadow="hover">
        <span>个人资料</span><br><br>
        <span style="float: left">用户名:  {{user.userNickname}}</span><br><br>
        <p style="float: left">简介:  {{user.userSuggest}}</p><br><br>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {PlayCounts, QueryUserId} from "../../../api/video/video";
import {FindAll} from "../../../api/user/user";

export default {
  name: "othershome",
  data(){
    return{
      num:'',
      historyList: [],
      currentPage: 1,
      total: 10, // 总条目数
      pages: 5,  // 总页数
      pageNum: 1, // 当前的页码
      pageSizes: [5, 10, 15, 20, 30, 40, 50], // select选项设置：条/页
      pageSize: 15, // 每页显示条目个数
      user:'',
    }
  },
  created() {
    let userId= this.$route.query.id;
    if (userId!=null&&userId!=''){
      this.queryUserId();
    }else{
      this.$router.go(-1);//返回上个页面
    }
  },
  mounted() {
    let userId= this.$route.query.id;
    if (userId!=null&&userId!=''){
      this.playCounts();
      this.findAll();
    }else{
      this.$router.go(-1);//返回上个页面
    }
  },
  methods:{
    findAll(){
      let userId= this.$route.query.id;
      FindAll(userId).then(result=>{
        this.user=result.data;
      })
    },
    /**
     * 查询用户发布视频
     */
    queryUserId() {
      let userId= this.$route.query.id;
      QueryUserId(userId, this.pageNum, this.pageSize).then(result => {
       // console.log(result.data);
        this.total = result.data.total;
        this.pages = result.data.pages;
        this.pageNum = result.data.pageNum;
        this.pageSize = result.data.pageSize;
        this.historyList = result.data.list;
      })
    },
    /**
     * 用户视频发布总量
     */
    playCounts() {
      let userId= this.$route.query.id;
      PlayCounts(userId).then(result => {
        this.num = result.data;
      })
    },
    /**
     * 分页方法
     * @param val
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.queryUserId();
    },
    /**
     * 分页方法
     * @param val
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryUserId()
    },
    // 点击跳转路径
    jumpPath(keyword) {
      // this.$router.push(`/search?keyword=${keyword}`);
      let newUrl = this.$router.resolve({
        path: `/Vedios?id=${keyword}`
      });
      window.open(newUrl.href, "_blank");
    }
  }
}
</script>

<style scoped>
.video:hover{
  -moz-box-shadow:2px 2px 10px #99a2aa;
  -webkit-box-shadow:2px 2px 10px #99a2aa;
  box-shadow:2px 2px 10px #99a2aa;
}
.jumptitle:hover {
  cursor: pointer;
}

.banner img {
  /* width: 100%; */
  height: 100%;
}
</style>
